<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title" style="height: 65px">
        <div style="margin-bottom: 5px; margin-top: 5px; margin-left: 10px">
          <a-space style="margin-top: 5px; margin-left: 10px">
            <a-select ref="select" v-model:value="dbzt" style="width: 300px">
              <a-select-option value="">达标状态</a-select-option>
              <a-select-option value="1">达标率大于98.37%</a-select-option>
              <a-select-option value="2">达标率小于98.37%</a-select-option>
            </a-select>
          </a-space>
          <a-space style="margin-left: 10px; margin-top: 15px">
            <span>关键字：</span>
            <a-input
              v-model:value="txtKeyWord"
              placeholder="请输入村代码、村名称进行查询"
              style="width: 300px; margin-top: -10px"
            />
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a-space class="search-btn">
            <a-button type="primary" @click="searchBtn">查询</a-button>
          </a-space>

           <a-space style="float: right; margin-right: 10px; margin-top: 15px">
            <a-button type="primary" @click="handleExport"> 导出村统计信息 </a-button>
          </a-space> 
        </div>

        
         

      </div>
      <div style="width: 100%; background: #fff; height: 40px">
        <div style="width: 45%; float: left; font-size: 16px; padding-left: 20px; line-height: 37px"
          ><home-outlined two-tone-color="#eb2f96" /><span style="padding: 0px 10px">
            {{ title }}</span
          ></div
        >
        <div
          style="
            width: 30%;
            float: right;
            font-size: 16px;
            padding-left: 20px;
            line-height: 37px;
            text-align: right;
            padding-right: 20px;
          "
          ><a style="color: blue" @click="getBack"
            ><arrow-left-outlined two-tone-color="#eb2f96" style="padding: 0px 10px" />返回上一页</a
          ></div
        >
      </div>
      <a-table
        style="margin-top: 0px"
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: tableHeight }"
        bordered
        :loading="loading"
      />
      <div class="pagination" style="float: right">
        <div style="float: left; line-height: 32px; padding-right: 12px">共{{ total }}条记录</div>
        <a-pagination
          show-size-changer
          show-total
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          style="float: right"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import moment from 'moment';
  import { useGlobSetting } from '/@/hooks/setting';
  import dayjs from 'dayjs';
  
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useRouter, useRoute } from 'vue-router';
  import { getTaskCunList } from '/@/api/demo/api'; //获取房屋列表
  import { getRegion, delethouseApi } from '/@/api/demo/system'; //统计工作进展
  import { useUserStore } from '/@/store/modules/user';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';
  import { useCheckStore } from '/@/store/modules/checkStore';
  let userInfo = ref<any>(null);
  let options = ref<any[]>([]);
  const title = ref<string>(''); // 开始时间
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(15);
  const dateFormat = 'YYYY-MM-DD';
  const value18 = ref<string[]>([]);
  const userStore = useUserStore();
	const globSetting = useGlobSetting();
  let txtKeyWord = ref<string>('');
  let nickname = ref<string>('');
  let dbzt = ref<string>('');
  let total = ref(0);
  const store = useCheckStore();
  const { taskid,  currentTitle,taskname } = store.formData || {};
  // 使用 useRouter 创建一个 router 实例
  const router = useRouter();
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    currentqx: string; // 当前行政区名称
    currentTitle: string;
    cityToken: string | any;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 50,
        style: { fontWeight: 'bold' }  // Add this line
      },
     {
        title: '行政区',
        dataIndex: 'xzq',
        key: 'xzq',
        align: 'center',
        width: 80,
      },
      {
        title: '乡镇名称',
        dataIndex: 'town',
        key: 'town',
        align: 'center',
        width: 100,
      },
      {
        title: '村名称',
        dataIndex: 'village',
        key: 'village',
        align: 'center',
        width: 120,
      },
      {
    title: '房屋总量',
    children: [
      {
        title: '总数',
        dataIndex: 'zccount',
        key: 'zccount',
        width: 80,
        align: 'center'
        
      },
      {
        title: '二层及以上',
        dataIndex: 'twocount',
        key: 'twocount',
        width: 120,
        align: 'center',
      },
      {
        title: '一层',
        dataIndex: 'onecount',
        key: 'onecount',
        width: 80,
        align: 'center',
      }
    ],
    className: 'house-total-header'
  },
     {
    title: '上次抽检剩余',
    children: [
      {
        title: '房屋总数',
        dataIndex: 'sycount',
        key: 'sycount',
        width: 100,
        align: 'center',
      },
      {
        title: '二层及以上',
        dataIndex: 'twosycount',
        key: 'twosycount',
        width: 120,
        align: 'center'
      },
      {
        title: '一层',
        dataIndex: 'onesycount',
        key: 'onesycount',
        width: 80,
        align: 'center'
      }
    ]
  },
     {
    title: '本次抽检',
    children: [
      {
        title: '抽检总数',
        dataIndex: 'cqcount',
        key: 'cqcount',
        width: 100,
        align: 'center',
      },
      {
        title: '二层及以上',
        dataIndex: 'twocqcount',
        key: 'twocqcount',
        width: 120,
        align: 'center'
      },
      {
        title: '一层',
        dataIndex: 'onecqcount',
        key: 'onecqcount',
        width: 80,
        align: 'center'
      }
    ]
  },
      {
        title: '检查人',
        dataIndex: 'jcr_nicknames',
        key: 'jcr_nicknames',
        align: 'center',
        width: 150,
    
      },
      {
        title: '已核验数量',
        dataIndex: 'hycount',
        key: 'hycount',
        align: 'center',
        width: 100,
        customCell: (row, index, column) => {
          let isNoHzyh = row.town !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
            getDetailData_1(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },
      {
        title: '未核验数量',
        dataIndex: 'whycount',
        key: 'whycount',
        align: 'center',
        width: 100,
        customCell: (row, index, column) => {
          let isNoHzyh = row.town !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
            getDetailData_2(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },
      {
        title: '已达标数量',
        dataIndex: 'ydbcount',
        key: 'ydbcount',
        align: 'center',
        width: 100,  
        customCell: (row, index, column) => {
          let isNoHzyh = row.town !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
            getDetailData_4(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },      
      },
      {
        title: '未达标数量',
        dataIndex: 'wdbcount',
        key: 'wdbcount',
        align: 'center',
        width: 100,
        customCell: (row, index, column) => {
          let isNoHzyh = row.town !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
            getDetailData_3(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },  
      {
        title: '达标率',
        dataIndex: 'db_pencent',
        key: 'db_pencent',
        align: 'center',
        width: 120,
        
      },  
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    currentqx: '', // 当前行政区名称
    currentTitle: '', // 当前详情标题
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
  // 表格的 ref Dom名称
  let { tableData, loading } = toRefs(data);



  async function getData() {
    let params: iParams = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      taskid: taskid + '',
      dbzt: dbzt.value,
      txtKeyWord: txtKeyWord.value
    };
    console.log('*****', params);
    loading.value = true;
    let res: any = await getTaskCunList(params);
    console.log('@res--工作进入汇总表', res.items);

    if (res || res.items.length > 0) {
      loading.value = false;
      data.tableData = [...res.items];
      console.log('@res--工作进入汇总表', tableData);
      total.value = res.total;
      title.value = '【'+taskname+'】任务下抽检村庄情况'+'(总数量：' + res.total + '个村)';
    }
  }

  function handleExport() {

    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url:
        uriBase +
        '/static/task/taskExportExcel?access_token=' +
        tk +
		'&taskid='+taskid+
		'&dbzt='+dbzt.value+
		'&txtKeyWord=' +
		txtKeyWord.value,
      target: '_blank',
    });
  }


  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }

  function searchBtn() {
    data.loading = true;
    pageIndex.value=1;
    pageSize.value=15;
   // value18.value = [];
    getData();
  }

  async function getRegionData() {
    let res: any = await getRegion();
    options.value = res;
  }
  function onChange(value) {
    value18.value = value;
  }
  const displayColumns = computed(() => {
    const { role } = userInfo.value;
    let arr: any[] = [];
    if (role === 'City') {
      // qx
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
      return arr;
    } else if (role === 'Area') {
      // jz
      arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
      return arr;
    } else if (role === 'Street') {
      // cun
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
      console.log('@Aarr', arr);
      return arr;
    } else {
      return data.tableColumns;
    }
  });


  //下钻 任务下某村
  const getDetailData= async (row: any) => {
    let params = {
       village: row.village,
      villagedm: row.villagedm,
      taskid: taskid + '',
      taskname: taskname+'',
      currentTitle: '【'+taskname+'】任务下'+'【' + row.village + '】核验情况',
    };
    store.setData(params); // 存入Pinia
    router.push({
      path: 'taskcunlist/cunhourselist',
      query: { showSelect: 'true' } // 参数必须是字符串
    });
  };
  //下钻 任务下某村已核验
  const getDetailData_1= async (row: any) => {
    let params = {
      village: row.village,
      villagedm: row.villagedm,
      taskid: taskid + '',
      taskname: taskname+'',
      currentTitle:  '【'+taskname+'】任务下'+'【' + row.village + '】已核验情况',
      hyzt2: "已核验",
    };
    store.setData(params); // 存入Pinia
    router.push({
      path: 'taskcunlist/cunhourselist',
      query: { showSelect: 'false' } // 参数必须是字符串
    });
  };
    //下钻 任务下某村未核验
  const getDetailData_2= async (row: any) => {
    let params = {
       village: row.village,
      villagedm: row.villagedm,
      taskid: taskid + '',
      taskname: taskname+'',
      currentTitle:  '【'+taskname+'】任务下'+'【' + row.village + '】未核验情况',
      hyzt2: "未核验",
    };
    store.setData(params); // 存入Pinia
    router.push({
      path: 'taskcunlist/cunhourselist',
      query: { showSelect: 'false' } // 参数必须是字符串
    });
  };
    const getDetailData_3= async (row: any) => {
    let params = {
       village: row.village,
      villagedm: row.villagedm,
      taskid: taskid + '',
      taskname: taskname+'',
      currentTitle:  '【'+taskname+'】任务下'+'【' + row.village + '】未核验情况',
      jsrysstd:"否"
    };
    store.setData(params); // 存入Pinia
    router.push({
      path: 'taskcunlist/cunhourselist',
      query: { showSelect: 'false' } // 参数必须是字符串
    });
  };
    const getDetailData_4= async (row: any) => {
    let params = {
       village: row.village,
      villagedm: row.villagedm,
      taskid: taskid + '',
      taskname: taskname+'',
      currentTitle:  '【'+taskname+'】任务下'+'【' + row.village + '】已达标情况',
      jsrysstd:"是"
    };
    store.setData(params); // 存入Pinia
    router.push({
      path: 'taskcunlist/cunhourselist',
      query: { showSelect: 'false' } // 参数必须是字符串
    });
  };
  const getBack = () => {
    router.go(-1);
  };
  const onShowSizeChange = () => {
  };
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******工作进展统计初始化******');
    getRegionData();
    getData();
    getTableHeight();
    // getTableData();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }
  .col-sql {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

 .house-total-header {
  background-color: #f0f9ff; /* Light blue */
 }
  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
